<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
// import AMapLoader from "@amap/amap-jsapi-loader";
import gongsi from "@/assets/company_default.png"
import gongdi from "@/assets/cs_default.png"
import che from "@/assets/car_default.png"
import chuliao from "@/assets/storage_default.png"
import allData from "@/utils/data"
import {addmarked, createInfoWindow, createMap, drawing, loadTheMap} from "@/utils/Map";

let a = [
  {
    id: 1,
    type: 0,
    name: "一号公司",
    lngLat: [114.49387,36.610377],
    status: "进行中",
    access: "禁用",
    alarm: 0
  },
  {
    id: 2,
    type: 1,
    name: "一号工地",
    lngLat: [114.496274,36.638206],
  },
  {
    id: 3,
    type: 2,
    name: "一号车辆",
    lngLat: [114.393206,36.469972],
    speed: 300,
    alarmInformation: "越界",
    // 1代表报警，0代表没报警
    alarm: 1,
    lineArr:[
      [114.525632, 38.022504],
      [114.533185, 38.022301],
      [114.5331, 38.035485],
      [114.511728, 38.035688],
      [114.511985, 38.043462]
    ]
  },
  {
    id: 5,
    type: 3,
    name: "一号储料罐",
    lngLat: [114.509835,36.577712],
    weight: 1000,
    alarm: 0
  },
]
a.forEach((item, index) => {

})


let animatFlag = ref<boolean>(false)
let startDiv = ref()
let pauDiv = ref()
let resDiv = ref()
let endDiv = ref()
let start_drawing = ref()
let end_drawing = ref()
let speedValue = ref<number>(300)
let startMarkers = ref()

// console.log(speedValue)


// startDiv.value.appendChild(btn2)
// pauDiv.value.appendChild(btn3)
// resDiv.value.appendChild(btn4)
// endDiv.value.appendChild(btn5)
// start_drawing.value.appendChild(drawingBtn)
// end_drawing.value.appendChild(end_drawingBtn)
// 图例


let arr = [animatFlag, startDiv, pauDiv, resDiv, endDiv, speedValue, start_drawing, end_drawing]

let map: any;

async function maps() {
  let AMap = await loadTheMap(["AMap.Scale", "AMap.MoveAnimation", 'AMap.MouseTool']) /*加载地图的函数*/

  map = createMap(AMap, [114.53915, 36.625849])/*创建地图函数*/
  console.log(map)
  startMarkers.value = allData.map(item => {
    let startMarker = addmarked(AMap, item)
    // 信息窗体
    startMarker.on('click', function () {
      createInfoWindow(AMap, item, map, arr, startMarker).open(map, startMarker.getPosition())/*创建自定义窗体*/
    });
    drawing(AMap, map, arr)


    return startMarker
  })

  // 将 markers 添加到地图
  map.add(startMarkers.value);

}

// 图例
let list = ref([{id: 0, content: '公司', checked: false}, {id: 1, content: '工地', checked: false}, {
  id: 2,
  content: '车',
  checked: false
}, {id: 3, content: '储料罐', checked: false}])

function changeChecked(item1: any) {
  item1.checked = !item1.checked
  let arr2: any = []
  list.value.forEach(item => {
    if (item.checked) {
      arr2.push(item.id)
    }
  })
  allData.forEach((item, index) => {
    if (arr2.includes(item.type)) {
      startMarkers.value[index].setMap(null);
    } else {
      startMarkers.value[index].setMap(map);
    }
  })
}


// console.log(allData[0].lngLat)
onMounted(() => {
  // console.log(arr[1].value)
  maps()
})
onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container">

  </div>
  <!--    信息窗体-->
  <!--    <div class="Information_sheet" v-for="item in allData" :key="item.id">-->
  <!--        <div>-->
  <!--          <div>经度：{{item.lngLat[0]}}</div>-->
  <!--          <div>纬度：{{item.lngLat[1]}}</div>-->
  <!--        </div>-->
  <!--        <div>-->
  <!--          <div>详细位置：河北省邯郸市复兴区G22青兰高速</div>-->
  <!--        </div>-->
  <!--        <div>-->
  <!--          <div>车速：0km/h</div>-->
  <!--          <div>发送时间：2018-12-28 14:24</div>-->
  <!--        </div>-->
  <!--        <div>-->
  <!--          <div>所属企业：邯郸全有生态建材有限公司</div>-->
  <!--          <div>待处理报警个数：42</div>-->
  <!--        </div>-->
  <!--        <div>-->
  <!--          <div>待处理报警类型：车辆超速</div>-->
  <!--        </div>-->
  <!--    </div>-->

  <div class="Electronic">
    <div>利用mouseTool绘制覆盖物</div>
    <div>
      <button>绘制线段</button>
    </div>

    <div>
      <button ref="start_drawing">绘制多边形</button>
    </div>

    <div>
      <button>绘制矩形</button>
    </div>
    <div>
      <button ref="end_drawing">结束绘制</button>
    </div>
  </div>
  <div class="Traject_animation" v-show="animatFlag">
    <p>速度:{{ speedValue }}</p>
    <div><input type="text" placeholder="请输入速度" v-model="speedValue"></div>
    <div>
      <button ref="startDiv">开始动画</button>
    </div>
    <div>
      <button ref="pauDiv">暂停动画</button>
    </div>
    <div>
      <button ref="resDiv">继续动画</button>
    </div>
    <div>
      <button ref="endDiv">结束动画</button>
    </div>
  </div>
  <div class="legend">
    <div >
      <div v-for="item in a">
        <img :src="item.type==0? gongsi :item.type==1? gongdi :item.type==2&& item.id==3? che:chuliao">
      </div>
    </div>
    <div class="ac">
      <div v-for="item in list" :key="item.id" >
        <input type="checkbox" :checked="item.checked" @click="changeChecked(item)">
        <span>{{ item.content }}</span>
      </div>
    </div>


  </div>
</template>

<style>
.legend {
  display: flex;
  box-shadow: 0 0 5px #dddff8;
  padding: 10px;
  border-radius: 5px;
  width: 120px;
  background: white;
  position: fixed;
  right: 15px;
  top: 15px;
  color: #6a6a6a;
}
.ac{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.legend div>div {
  display: flex;
  align-items: center;
}

.legend div>div img {
  width: 25px;
}

body {
  margin: 0;
  padding: 0;
}

/*轨迹动画*/
.Traject_animation {
  background: white;
  position: fixed;
  top: 10px;
  left: 15px;
  width: 80px;
}

.Traject_animation > p {
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #7f7f7f;
  padding-left: 5px;
  font-size: 14px;
  margin: 0;
}

.Traject_animation > div {
  margin: 1px;
}

.Traject_animation > div > input {
  border-radius: 5px;
  padding-left: 5px;
  height: 30px;
  margin: 0 auto;
  width: 90%;
  border: 0;
  outline: 1px solid #49b4f8;
}

.Traject_animation > div > button {
  border-radius: 5px;
  color: #7f7f7f;
  cursor: pointer;
  height: 30px;
  background: white;
  border: 1px solid #e4e2df;
  width: 100%;
  transition: background 0.5s;
}

.Traject_animation > div > button:hover {
  color: white;
  background: #49b4f8;
}

/*信息窗体*/
.Information_sheet {

}

.Information_sheet > div {
  justify-content: space-between;
  display: flex;
  color: #955633;
}

.TrackBtn {
  cursor: pointer;
  border: 1px solid #49b4f8;
  color: #49b4f8;
  background: white;
  width: 80px;
  height: 25px;
  border-radius: 15px;
  transition: background 0.5s;
}

.TrackBtn:hover {
  background: #49b4f8;
  color: white;
}

.Information_sheet > div > div {
  margin: 5px;
}

/*电子围栏按钮*/
.Electronic {
  width: 200px;
  right: 15px;
  bottom: 15px;
  position: fixed;
  background: white;
  padding: 10px;
  box-shadow: 0 0 15px #dee0fc;
}

.Electronic button {
  color: #49b4f8;
  margin-top: 10px;
  width: 100%;
  height: 25px;
  line-height: 25px;
  border-radius: 10px;
  border: 1px solid #49b4f8;
  background: white;
  cursor: pointer;
  transition: background 0.5s;
}

.Electronic button:hover {
  color: white;
  background: #49b4f8;
}


#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

/*信息弹窗*/
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  width: 462px;
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
}

div.info-top div {

  display: inline-block;
  color: #1267bb;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  width: 450px;
  overflow: hidden;
  /*height: 180px;*/
  font-weight: bold;
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-middle > button {

  float: right;
}

</style>